<!DOCTYPE html>
<html>
	<head>
		<title>用户添加</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<!-- 参数栏 -->
			<div class="c-panel">
				<div class="c-title">用户添加</div>
				<el-form v-if="m" label-width="100px">
					<div class="c-item br">
						<label class="c-label">头像：</label>
						<el-upload
							class="avatar-uploader"
							action="http://localhost:8080/files/upload"
							name="image"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="displayImage" :src="displayImage" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div class="c-item br">
						<label class="c-label">昵称：</label>
						<el-input v-model="m.nickname" placeholder="请输入昵称" style="width: 200px;"></el-input>
						<el-button @click="generateNickname" size="mini" type="primary" icon="el-icon-magic-stick" style="margin-left: 10px;">
							生成昵称
						</el-button>
					</div>
					<div class="c-item br">
						<label class="c-label">用户名：</label>
						<el-input v-model="m.username" placeholder="请输入用户名" style="width: 200px;"></el-input>
						<el-button @click="generateUsername" size="mini" type="primary" icon="el-icon-magic-stick" style="margin-left: 10px;">
							生成用户名
						</el-button>
					</div>
					<div class="c-item br">
						<label class="c-label">密码：</label>
						<el-input v-model="m.password" :type="passwordVisible ? 'text' : 'password'" placeholder="请输入密码" style="width: 160px;"></el-input>
						<el-button @click="togglePasswordVisibility" size="mini" :icon="passwordVisible ? 'el-icon-view' : 'el-icon-view-off'"
							style="margin-left: 5px;" :title="passwordVisible ? '隐藏密码' : '显示密码'">
						</el-button>
						<el-button @click="generatePassword" size="mini" type="primary" icon="el-icon-magic-stick" style="margin-left: 5px;">
							生成密码
						</el-button>
					</div>
					<div class="c-item br">
						<label class="c-label">邮箱：</label>
						<el-input v-model="m.email" placeholder="请输入邮箱" style="width: 200px;"></el-input>
						<el-select v-model="selectedEmailSuffix" placeholder="选择后缀" style="width: 180px; margin-left: 10px;">
							<el-option label="@qq.com" value="@qq.com"></el-option>
							<el-option label="@163.com" value="@163.com"></el-option>
							<el-option label="@126.com" value="@126.com"></el-option>
							<el-option label="@gmail.com" value="@gmail.com"></el-option>
							<el-option label="@hotmail.com" value="@hotmail.com"></el-option>
							<el-option label="@outlook.com" value="@outlook.com"></el-option>
							<el-option label="@sina.com" value="@sina.com"></el-option>
							<el-option label="@sohu.com" value="@sohu.com"></el-option>
						</el-select>
						<el-button @click="generateEmail" size="mini" type="primary" icon="el-icon-magic-stick" style="margin-left: 10px;">
							生成邮箱
						</el-button>
					</div>
					<div class="c-item br">
						<label class="c-label">手机：</label>
						<el-input v-model="m.phone" placeholder="请输入手机号" style="width: 200px;"></el-input>
						<el-button @click="generatePhone" size="mini" type="primary" icon="el-icon-magic-stick" style="margin-left: 10px;">
							生成手机号
						</el-button>
					</div>
					<div class="c-item br">
						<label class="c-label">角色：</label>
						<el-select v-model="m.role">
							<el-option label="管理员" value="ADMIN"></el-option>
							<el-option label="普通用户" value="USER"></el-option>
						</el-select>
					</div>
					<div class="c-item br">
						<label class="c-label">性别：</label>
						<el-radio-group v-model="m.sex">
							<el-radio label="男">男</el-radio>
							<el-radio label="女">女</el-radio>
						</el-radio-group>
					</div>
					<div class="c-item br" style="display: none;">
						<label class="c-label">注册时间：</label>
						<el-input v-model="m.createTime" type="hidden"></el-input>
					</div>
					<div class="c-item br">
						<label class="c-label"></label>
						<el-button type="success" icon="el-icon-magic-stick" @click="generateAll" style="margin-right: 10px;">
							一键生成全部
						</el-button>
						<el-button type="primary" icon="el-icon-plus" @click="ok">确定</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '.vue-box',
				data: {
					img: '../../static/img/',
					imagePreviewUrl: 'http://8.134.184.130:8008/images/', // 图片预览路径
					selectedEmailSuffix: '@qq.com', // 默认选择的邮箱后缀
					passwordVisible: false, // 密码可见性状态
					nicknameData: null, // 昵称数据
					isLoadingNicknameData: false, // 昵称数据加载状态
					m: {
						nickname: '',
						username: '',
						password: '',
						email: '',
						phone: '',
						sex: '男',
						role: 'USER',
						image: 'default.png',
						createTime: new Date().toLocaleString('zh-CN', {
							year: 'numeric',
							month: '2-digit',
							day: '2-digit',
							hour: '2-digit',
							minute: '2-digit',
							second: '2-digit',
							hour12: false
						}).replace(/\//g, '-')
					},
					displayImage: ''
				},
				created() {
					this.displayImage = this.imagePreviewUrl + this.m.image;
					// 加载昵称数据文件
					this.loadNicknameData();
				},
				methods: {
					// 加载昵称数据
					loadNicknameData: function() {
						this.isLoadingNicknameData = true;
						$.ajax({
							url: '../../chinese-nickname-data.json',
							type: 'GET',
							dataType: 'json',
							success: function(res) {
								this.nicknameData = res.chinese_nickname_data;
								console.log('昵称数据加载成功', this.nicknameData);
								this.isLoadingNicknameData = false;
							}.bind(this),
							error: function(err) {
								console.error('昵称数据加载失败', err);
								this.$message.warning('昵称数据加载失败，将使用默认数据');
								this.isLoadingNicknameData = false;
								// 加载失败时使用默认数据
								this.nicknameData = {
									形容词: [
										"可爱的", "聪明的", "勇敢的", "温柔的", "活泼的", "优雅的", "神秘的", "快乐的", "阳光的", "梦幻的",
										"机智的", "善良的", "美丽的", "帅气的", "酷炫的", "淘气的", "乖巧的", "文静的", "开朗的", "幽默的"
									],
									动物名词: [
										"小猫", "小狗", "小鸟", "小鱼", "小熊", "小兔", "小鹿", "小狐", "小龙", "小凤",
										"小虎", "小狼", "小象", "小猴", "小鼠", "小羊", "小牛", "小马", "小猪", "小鸡"
									],
									植物名词: [
										"小花", "小草", "小树", "小叶", "玫瑰", "百合", "茉莉", "桂花", "梅花", "樱花"
									],
									美好事物: [
										"星辰", "月亮", "太阳", "彩虹", "流星", "花朵", "蝴蝶", "天使", "精灵", "公主"
									]
								};
							}.bind(this)
						});
					},
					handleAvatarSuccess(res, file) {
						console.log("上传响应:", res);
						console.log("文件信息:", file);

						// 根据后端返回的 ResultVO 格式获取图片URL
						let imageUrl = '';
						if (res && res.data) {
							imageUrl = res.data; // ResultVO 中的 data 字段包含文件路径
						} else if (res && res.url) {
							imageUrl = res.url; // 兼容其他可能的格式
						} else {
							console.error("无法获取图片URL:", res);
							this.$message.error('图片上传失败');
							return;
						}

						// 检查是否是完整URL
						let imageFileName = '';
						if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
							// 如果是完整URL，提取文件名
							const fileNameMatch = imageUrl.match(/\/([^\/]+)$/);
							if (fileNameMatch) {
								imageFileName = fileNameMatch[1]; // 获取文件名部分
							} else {
								imageFileName = imageUrl; // 如果没有匹配到，使用完整URL
							}
						} else {
							// 如果只是文件名，直接使用
							imageFileName = imageUrl;
						}

						console.log("处理的头像文件名:", imageFileName);

						this.m.image = imageFileName; // 保存文件名
						this.displayImage = this.imagePreviewUrl + imageFileName; // 显示完整URL
						
						this.$message.success('头像上传成功');
					},
					beforeAvatarUpload(file) {
						const isImage = file.type.indexOf('image/') === 0;
						const isLt5M = file.size / 1024 / 1024 < 5;

						if (!isImage) {
							this.$message.error('只能上传图片文件!');
							return false;
						}
						if (!isLt5M) {
							this.$message.error('图片大小不能超过 5MB!');
							return false;
						}
						return true;
					},
					// 切换密码可见性
					togglePasswordVisibility: function() {
						this.passwordVisible = !this.passwordVisible;
					},
					ok: function() {
						if (!this.m.username || !this.m.password) {
							this.$message.error('用户名和密码不能为空');
							return;
						}
						if(this.m.phone.length !== 11) {
							this.$message.error('手机号格式不正确');
							return;
						}
						// 设置当前时间
						this.m.createTime = new Date().toLocaleString('zh-CN', {
							year: 'numeric',
							month: '2-digit',
							day: '2-digit',
							hour: '2-digit',
							minute: '2-digit',
							second: '2-digit',
							hour12: false
						}).replace(/\//g, '-');
						
						$.ajax({
							url: 'http://localhost:8080/user/addUser',
							type: 'POST',
							data: this.m,
							success: function(res) {	
								if(res.code === 200) {
									this.$message.success('添加成功');
									this.resetForm();
									// 刷新父页面的列表
									if(window.parent && window.parent.app) {
										window.parent.app.f5();
									}
								} else {
									this.$message.error(res.message || '添加失败');
								}
							}.bind(this)
						});
					},
					resetForm: function() {
						this.m = {
							nickname: '',
							username: '',
							password: '',
							email: '',
							phone: '',
							sex: '男',
							role: 'USER',
							image: 'default.png',
							createTime: new Date().toLocaleString('zh-CN', {
								year: 'numeric',
								month: '2-digit',
								day: '2-digit',
								hour: '2-digit',
								minute: '2-digit',
								second: '2-digit',
								hour12: false
							}).replace(/\//g, '-')
						};
						this.displayImage = this.imagePreviewUrl + this.m.image;
					},
					// 生成指定长度的随机字符串（字母+数字）
					generateRandomString: function(length) {
						const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
						let result = "";
						for (let i = 0; i < length; i++) {
							const index = Math.floor(Math.random() * chars.length);
							result += chars.charAt(index);
						}
						return result;
					},
					// 生成随机手机号
					generateRandomPhoneNumber: function() {
						const validPrefixes = [
							// 中国移动
							"134", "135", "136", "137", "138", "139",
							"150", "151", "152", "157", "158", "159",
							"182", "183", "184", "187", "188", "195",
							// 中国联通
							"130", "131", "132", "155", "156", "166",
							"185", "186", "176", "196",
							// 中国电信
							"133", "153", "180", "181", "189", "191",
							"193", "199", "173", "177"
						];

						// 随机选择一个有效号段
						const prefix = validPrefixes[Math.floor(Math.random() * validPrefixes.length)];
						let phone = prefix;

						// 生成剩余8位数字
						for (let i = 0; i < 8; i++) {
							const digit = Math.floor(Math.random() * 10);
							phone += digit;
						}

						return phone;
					},
					// 生成安全密码（仅字母和数字）
					generateSecurePassword: function(length = 12) {
						const lowerChars = "abcdefghijklmnopqrstuvwxyz";
						const upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
						const digits = "0123456789";
						const allChars = lowerChars + upperChars + digits;

						let password = "";

						// 确保至少各有一个小写、大写、数字
						password += this.getRandomChar(lowerChars);
						password += this.getRandomChar(upperChars);
						password += this.getRandomChar(digits);

						// 剩余字符随机填充
						for (let i = 3; i < length; i++) {
							password += this.getRandomChar(allChars);
						}

						// 打乱顺序，避免开头是固定模式
						return this.shuffleString(password);
					},
					// 从指定字符串中随机选取一个字符
					getRandomChar: function(str) {
						const index = Math.floor(Math.random() * str.length);
						return str.charAt(index);
					},
					// 打乱字符串顺序
					shuffleString: function(input) {
						const chars = input.split('');
						for (let i = 0; i < chars.length; i++) {
							const randomIndex = Math.floor(Math.random() * chars.length);
							const temp = chars[i];
							chars[i] = chars[randomIndex];
							chars[randomIndex] = temp;
						}
						return chars.join('');
					},
					// 生成昵称
					generateNickname: function() {
						// 如果昵称数据尚未加载完成，显示提示
						if (this.isLoadingNicknameData) {
							this.$message.warning('昵称数据正在加载中，请稍后再试');
							return;
						}

						// 如果昵称数据不存在，尝试重新加载
						if (!this.nicknameData) {
							this.$message.warning('昵称数据不存在，尝试重新加载');
							this.loadNicknameData();
							return;
						}

						// 根据用户角色确定前缀
						let prefix = "";
						if (this.m.role === 'ADMIN') {
							prefix = "管理员_";
						} else {
							prefix = "用户_";
						}

						// 获取昵称数据中的所有分类
						const categories = Object.keys(this.nicknameData);
						
						// 随机选择生成模式（增加到10种模式，可根据数据分类扩展）
						const randomType = Math.floor(Math.random() * 10);
						let nickname = "";

						if (randomType === 0) {
							// 形容词 + 动物
							const adj = this.getRandomItem(this.nicknameData.形容词 || []);
							const noun = this.getRandomItem(this.nicknameData.动物名词 || []);
							nickname = adj + noun;
						} else if (randomType === 1) {
							// 颜色 + 动物
							const color = this.getRandomItem(this.nicknameData.颜色词汇 || []);
							const noun = this.getRandomItem(this.nicknameData.动物名词 || []);
							nickname = color + "色" + noun;
						} else if (randomType === 2) {
							// 动物 + 数字
							const noun = this.getRandomItem(this.nicknameData.动物名词 || []);
							const number = Math.floor(Math.random() * 9999) + 1;
							nickname = noun + number;
						} else if (randomType === 3) {
							// 美好事物 + 数字
							const thing = this.getRandomItem(this.nicknameData.美好事物 || []);
							const number = Math.floor(Math.random() * 999) + 1;
							nickname = thing + number;
						} else if (randomType === 4) {
							// 古风词汇 + 植物
							const ancient = this.getRandomItem(this.nicknameData.古风词汇 || []);
							const plant = this.getRandomItem(this.nicknameData.植物名词 || []);
							nickname = ancient + plant;
						} else if (randomType === 5) {
							// 现代词汇 + 数字
							const modern = this.getRandomItem(this.nicknameData.现代词汇 || []);
							const number = Math.floor(Math.random() * 99) + 1;
							nickname = modern + number;
						} else if (randomType === 6) {
							// 形容词 + 美好事物
							const adj = this.getRandomItem(this.nicknameData.形容词 || []);
							const thing = this.getRandomItem(this.nicknameData.美好事物 || []);
							nickname = adj + thing;
						} else if (randomType === 7) {
							// 季节汉字 + 植物
							const season = this.getRandomItem(this.nicknameData.季节汉字 || []);
							const plant = this.getRandomItem(this.nicknameData.植物名词 || []);
							nickname = season + plant;
						} else if (randomType === 8) {
							// 星座汉字 + 数字
							const constellation = this.getRandomItem(this.nicknameData.星座汉字 || []);
							const number = Math.floor(Math.random() * 99) + 1;
							nickname = constellation + number;
						} else {
							// 情感词汇 + 自然元素
							const emotion = this.getRandomItem(this.nicknameData.情感词汇 || []);
							const nature = this.getRandomItem(this.nicknameData.自然元素 || []);
							nickname = emotion + nature;
						}

						// 添加角色前缀
						this.m.nickname = prefix + nickname;
					},
					// 辅助方法：从数组中随机选择元素
					getRandomItem: function(array) {
						if (!array || array.length === 0) return "随机昵称"; // 防止数组为空
						return array[Math.floor(Math.random() * array.length)];
					},
					// 生成用户名
					generateUsername: function() {
						// 根据用户角色确定前缀
						let prefix = "";
						if (this.m.role === 'ADMIN') {
							prefix = "admin_";
						} else {
							prefix = "user_";
						}

						const randomString = this.generateRandomString(6);
						const timestamp = Date.now().toString().slice(-4);
						this.m.username = prefix + randomString + timestamp;
					},
					// 生成密码
					generatePassword: function() {
						this.m.password = this.generateSecurePassword(12);
					},
					// 生成手机号
					generatePhone: function() {
						this.m.phone = this.generateRandomPhoneNumber();
					},
					// 生成邮箱
					generateEmail: function() {
						if (!this.selectedEmailSuffix) {
							this.$message.warning('请先选择邮箱后缀');
							return;
						}

						let emailPrefix = '';

						// 根据不同邮箱后缀制定不同的生成规则
						switch (this.selectedEmailSuffix) {
							case '@qq.com':
								// QQ邮箱：通常使用QQ号（纯数字）或简单字母数字组合
								const qqPatterns = [
									// QQ号模式（5-11位数字）
									() => {
										const length = Math.floor(Math.random() * 7) + 5; // 5-11位
										let result = '';
										for (let i = 0; i < length; i++) {
											result += Math.floor(Math.random() * 10);
										}
										return result;
									},
									// 字母+数字组合（年轻用户喜欢）
									() => {
										const names = ['xiaoming', 'xiaohong', 'xiaogang', 'xiaoli', 'xiaohua', 'xiaofang'];
										const name = names[Math.floor(Math.random() * names.length)];
										const year = Math.floor(Math.random() * 30) + 1990; // 1990-2019
										return name + year;
									}
								];
								const qqType = Math.floor(Math.random() * qqPatterns.length);
								emailPrefix = qqPatterns[qqType]();
								break;

							case '@163.com':
							case '@126.com':
								// 网易邮箱：偏向专业，常用姓名拼音+数字
								const neteasePatterns = [
									// 姓名拼音+数字
									() => {
										const surnames = ['zhang', 'wang', 'li', 'zhao', 'chen', 'liu', 'yang', 'huang', 'wu', 'zhou'];
										const names = ['wei', 'fang', 'min', 'jie', 'lei', 'tao', 'ping', 'jun', 'hua', 'qiang'];
										const surname = surnames[Math.floor(Math.random() * surnames.length)];
										const name = names[Math.floor(Math.random() * names.length)];
										const number = Math.floor(Math.random() * 999) + 1;
										return surname + name + number;
									},
									// 英文名+数字
									() => {
										const englishNames = ['david', 'michael', 'john', 'robert', 'william', 'james', 'mary', 'patricia', 'jennifer', 'linda'];
										const name = englishNames[Math.floor(Math.random() * englishNames.length)];
										const number = Math.floor(Math.random() * 9999) + 1;
										return name + number;
									}
								];
								const neteaseType = Math.floor(Math.random() * neteasePatterns.length);
								emailPrefix = neteasePatterns[neteaseType]();
								break;

							case '@gmail.com':
								// Gmail：国际化，偏向英文名或专业组合
								const gmailPatterns = [
									// 英文名.姓氏格式
									() => {
										const firstNames = ['john', 'jane', 'michael', 'sarah', 'david', 'emily', 'robert', 'lisa', 'william', 'mary'];
										const lastNames = ['smith', 'johnson', 'williams', 'brown', 'jones', 'garcia', 'miller', 'davis', 'rodriguez', 'martinez'];
										const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
										const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
										return firstName + '.' + lastName;
									},
									// 专业组合（字母+数字）
									() => {
										const chars = "abcdefghijklmnopqrstuvwxyz";
										let result = "";
										const length = Math.floor(Math.random() * 3) + 6; // 6-8位字母
										for (let i = 0; i < length; i++) {
											result += chars.charAt(Math.floor(Math.random() * chars.length));
										}
										const number = Math.floor(Math.random() * 99) + 1;
										return result + number;
									}
								];
								const gmailType = Math.floor(Math.random() * gmailPatterns.length);
								emailPrefix = gmailPatterns[gmailType]();
								break;

							case '@hotmail.com':
							case '@outlook.com':
								// 微软邮箱：偏向英文，商务风格
								const microsoftPatterns = [
									// 英文名+数字
									() => {
										const names = ['alex', 'chris', 'jordan', 'taylor', 'morgan', 'casey', 'riley', 'avery', 'quinn', 'sage'];
										const name = names[Math.floor(Math.random() * names.length)];
										const number = Math.floor(Math.random() * 9999) + 1;
										return name + number;
									},
									// 字母组合+年份
									() => {
										const chars = "abcdefghijklmnopqrstuvwxyz";
										let result = "";
										const length = Math.floor(Math.random() * 2) + 5; // 5-6位字母
										for (let i = 0; i < length; i++) {
											result += chars.charAt(Math.floor(Math.random() * chars.length));
										}
										const year = Math.floor(Math.random() * 25) + 1995; // 1995-2019
										return result + year;
									}
								];
								const microsoftType = Math.floor(Math.random() * microsoftPatterns.length);
								emailPrefix = microsoftPatterns[microsoftType]();
								break;

							case '@sina.com':
							case '@sohu.com':
								// 新浪/搜狐邮箱：中国用户，偏向中文拼音
								const sinaPatterns = [
									// 中文名拼音
									() => {
										const surnames = ['li', 'wang', 'zhang', 'liu', 'chen', 'yang', 'zhao', 'huang', 'zhou', 'wu'];
										const names = ['ming', 'hong', 'gang', 'li', 'hua', 'fang', 'wei', 'jie', 'lei', 'tao'];
										const surname = surnames[Math.floor(Math.random() * surnames.length)];
										const name = names[Math.floor(Math.random() * names.length)];
										const number = Math.floor(Math.random() * 999) + 1;
										return surname + name + number;
									},
									// 有意义的词汇+数字
									() => {
										const words = ['sunshine', 'rainbow', 'dream', 'happy', 'lucky', 'smile', 'star', 'moon', 'flower', 'spring'];
										const word = words[Math.floor(Math.random() * words.length)];
										const number = Math.floor(Math.random() * 999) + 1;
										return word + number;
									}
								];
								const sinaType = Math.floor(Math.random() * sinaPatterns.length);
								emailPrefix = sinaPatterns[sinaType]();
								break;

							default:
								// 默认生成规则
								emailPrefix = this.generateRandomString(8).toLowerCase();
								break;
						}

						this.m.email = emailPrefix + this.selectedEmailSuffix;
						
					},
					// 一键生成全部
					generateAll: function() {
						this.generateNickname();
						this.generateUsername();
						this.generatePassword();
						this.generateEmail();
						this.generatePhone();
						this.$message.success('全部信息生成成功！');
					},
					// 判断昵称是否为自动生成的格式
					isAutoGeneratedNickname: function() {
						if (!this.m.nickname) return false;
						// 检查是否以角色前缀开头
						return this.m.nickname.startsWith('admin_') || this.m.nickname.startsWith('user_');
					},
					// 判断用户名是否为自动生成的格式
					isAutoGeneratedUsername: function() {
						if (!this.m.username) return false;
						// 检查是否以角色前缀开头
						return this.m.username.startsWith('admin_') || this.m.username.startsWith('user_');
					}
				},
				// 监听器 - 当角色变化时自动更新昵称和用户名前缀
				watch: {
					'm.role': function(newRole, oldRole) {
						if (newRole !== oldRole) {
							let oldPrefix = oldRole === 'ADMIN' ? 'admin_' : 'user_';
							let newPrefix = newRole === 'ADMIN' ? 'admin_' : 'user_';
							let updated = false;

							// 更新昵称前缀
							if (this.m.nickname && this.isAutoGeneratedNickname()) {
								if (this.m.nickname.startsWith(oldPrefix)) {
									this.m.nickname = this.m.nickname.replace(oldPrefix, newPrefix);
									updated = true;
								}
							}

							// 更新用户名前缀
							if (this.m.username && this.isAutoGeneratedUsername()) {
								if (this.m.username.startsWith(oldPrefix)) {
									this.m.username = this.m.username.replace(oldPrefix, newPrefix);
									updated = true;
								}
							}

							if (updated) {
								this.$message.info('昵称和用户名前缀已根据角色自动更新');
							}
						}
					}
				}
			})
		</script>
		<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			vertical-align: middle;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		.avatar {
			width: 100px;
			height: 100px;
			display: block;
		}
		.c-item {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
		}
		.c-label {
			width: 100px;
			text-align: right;
			padding-right: 12px;
			line-height: 40px;
		}
		.avatar-uploader {
			display: inline-block;
		}

		/* 邮箱生成区域样式 */
		.c-item .el-select {
			margin-left: 10px;
		}

		.c-item .el-button {
			margin-left: 10px;
		}

		/* 密码显示/隐藏按钮样式 */
		.el-button .el-icon-view,
		.el-button .el-icon-view-off {
			font-size: 14px;
		}

		/* 密码字段按钮组样式 */
		.c-item .el-button + .el-button {
			margin-left: 5px;
		}

		/* 响应式布局 */
		@media (max-width: 768px) {
			.c-item {
				flex-wrap: wrap;
			}

			.c-item .el-input,
			.c-item .el-select,
			.c-item .el-button {
				margin-left: 0;
				margin-top: 5px;
			}
		}
		</style>
	</body>
</html>
